<template>
  <div class="table-cells">
    <div class="table-title">{{ tableItem.tableTitle }}</div>
    <el-table ref="dataTable" :data="tableItem.tableData" style="width: 100%" border scrollbar-always-on show-summary :summary-method="getSummaries" header-cell-class-name="table-header-row" empty-text="没有数据">
      <el-table-column prop="parentDeptName" label="地区" width="120" fixed />
      <el-table-column label="部门" width="150" fixed>
        <template #default="scope">
          <div>{{ scope.row.deptName }}({{ scope.row.deptUserLength }})</div>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="total" width="120" fixed />
      <el-table-column v-for="(item, index) in tableColumnDate" :prop="item.label" :key="index" width="120" resizable>
        <template #header>
          <div class="table-header-cell">
            <div>{{ item.label }}</div>
          </div>
        </template>
        <template #default="scope">
          <div>{{ scope.row[item.label] || 0 }}</div>
        </template>
      </el-table-column>
      <el-table-column></el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { h } from 'vue'
const props = defineProps({
  tableItem: {
    type: Object,
    default: () => {},
  },
  tableColumnDate: {
    type: Array as any,
    default: () => [],
  },
})
/**
 * 计算表格数据中的汇总信息
 *
 * @param param 包含表格列信息和数据的对象
 * @returns 返回汇总信息的数组，每个元素可能是字符串或VNode，表示该列的汇总结果
 */

const getSummaries = (param: any) => {
  const { columns } = param
  const sums: any[] = []
  columns.forEach((column: any, index: number) => {
    if (index === 0) {
      sums[index] = h('div', { class: 'total-headcount', style: 'width:270px;' }, ['Total Headcount'])
      return
    }
    if (column.property) {
      sums[index] = props.tableItem.rowsHeadcount[column.property] || 0
    }
  })
  sums[1] = ''
  return sums
}
</script>
